import 'package:flutter/material.dart';
import 'package:flutter_09_game/config/app_color.dart';
import 'package:flutter_09_game/generated/assets.dart';
import 'package:flutter_09_game/utils/utils_other.dart';
import 'package:flutter_09_game/widgets/image/auto_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 加密货币标签选择器组件
/// 基于Figma设计图实现，支持USDT/TRX图标显示
class CryptoTagSelector extends StatelessWidget {
  /// 标签选项列表
  final List<String> options;

  /// 当前选中的标签
  final String? selectedValue;

  /// 标签选择回调
  final ValueChanged<String>? onChanged;

  /// 是否启用选择功能
  final bool enabled;

  const CryptoTagSelector({
    super.key,
    required this.options,
    this.selectedValue,
    this.onChanged,
    this.enabled = true,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(4.w),
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.3), // rgba(0,0,0,0.3)
        borderRadius: BorderRadius.circular(8.w),
        border: Border(
            bottom: BorderSide(
          color: AppColor.colorDEE3F0_26, // rgba(222,227,240,0.15)
          width: 1.w,
        )),
      ),
      child: Row(
        children: options.asMap().entries.map((entry) {
          final index = entry.key;
          final option = entry.value;
          final isSelected = selectedValue == option;
          final isFirst = index == 0;
          final isLast = index == options.length - 1;

          return Expanded(
            child: _buildTagItem(
              option: option,
              isSelected: isSelected,
              isFirst: isFirst,
              isLast: isLast,
            ),
          );
        }).toList(),
      ),
    );
  }

  /// 构建单个标签项
  Widget _buildTagItem({
    required String option,
    required bool isSelected,
    required bool isFirst,
    required bool isLast,
  }) {
    // 获取图标资源
    String? iconAsset = UtilsOther().getAmountTagNullIcon(option);

    // 计算圆角样式
    BorderRadius borderRadius = _getBorderRadius(isFirst, isLast);

    return GestureDetector(
      onTap: enabled ? () => onChanged?.call(option) : null,
      child: Container(
        height: 44.w,
        margin: EdgeInsets.only(
          right: isLast ? 0 : 3.w,
        ),
        decoration: BoxDecoration(
          color: isSelected
              ? AppColor.primary.withOpacity(0.3) // rgba(0,187,255,0.3)
              : AppColor.textPrimary.withOpacity(0.15),
          // rgba(236,241,255,0.15)
          borderRadius: borderRadius,
          border: Border(
              bottom: BorderSide(
            color: Colors.black.withOpacity(0.3), // rgba(0,0,0,0.3)
            width: 2.w,
          )),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (iconAsset != null) ...[
              AutoImage(
                iconAsset,
                width: 20.w,
                height: 20.w,
              ),
              4.horizontalSpace,
            ],
            Text(
              option.toUpperCase(),
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w600,
                color: isSelected
                    ? AppColor.textPrimary
                        .withOpacity(0.94) // rgba(236,241,255,0.94)
                    : AppColor.textPrimary
                        .withOpacity(0.7), // rgba(236,241,255,0.3)
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 计算标签项的圆角样式
  BorderRadius _getBorderRadius(bool isFirst, bool isLast) {
    if (isFirst && isLast) {
      // 只有一个标签
      return BorderRadius.circular(6.w);
    } else if (isFirst) {
      // 第一个标签
      return BorderRadius.only(
        topLeft: Radius.circular(6.w),
        bottomLeft: Radius.circular(6.w),
        topRight: Radius.circular(3.w),
        bottomRight: Radius.circular(3.w),
      );
    } else if (isLast) {
      // 最后一个标签
      return BorderRadius.only(
        topLeft: Radius.circular(3.w),
        bottomLeft: Radius.circular(3.w),
        topRight: Radius.circular(6.w),
        bottomRight: Radius.circular(6.w),
      );
    } else {
      // 中间标签
      return BorderRadius.circular(3.w);
    }
  }
}
